import React, { useState } from 'react';
import { Card, List, Button, Typography, Empty, Badge, Rate, Spin, Alert } from 'antd';
import { Link, useParams } from 'react-router-dom';
import { StarOutlined, FileTextOutlined, VideoCameraOutlined, PictureOutlined, CalendarOutlined } from '@ant-design/icons';
import dataService from '../../services/dataService';
import type { Favorite } from '../../services/dataService';

const { Title, Paragraph } = Typography;

const FavoritePage: React.FC = () => {
  const { id } = useParams<{ id: string }>();

  // 获取类型对应的图标
  const getTypeIcon = (type: string) => {
    switch (type) {
      case 'article':
        return <FileTextOutlined style={{ color: '#1890ff' }} />;
      case 'video':
        return <VideoCameraOutlined style={{ color: '#ff4d4f' }} />;
      case 'image':
        return <PictureOutlined style={{ color: '#52c41a' }} />;
      default:
        return <StarOutlined style={{ color: '#faad14' }} />;
    }
  };

  // 获取类型对应的文本
  const getTypeText = (type: string) => {
    switch (type) {
      case 'article':
        return '文章';
      case 'video':
        return '视频';
      case 'image':
        return '图片';
      default:
        return '其他';
    }
  };

  // 如果提供了ID，则显示单个收藏详情
  if (id) {
    const favorite = dataService.getFavoriteById(id);
    
    if (!favorite) {
      return (
        <div className="content-section">
          <Empty description="未找到该个人收藏" />
          <div style={{ marginTop: 24 }}>
            <Button type="primary">
              <Link to="/favorites">返回列表</Link>
            </Button>
          </div>
        </div>
      );
    }
    
    return (
      <div className="content-section">
        <Title level={2}>
          <Badge.Ribbon text={getTypeText(favorite.type)} color={favorite.type === 'article' ? '#1890ff' : favorite.type === 'video' ? '#ff4d4f' : '#52c41a'}>
            {favorite.title}
          </Badge.Ribbon>
        </Title>
        
        <div style={{ marginBottom: 16, display: 'flex', alignItems: 'center' }}>
          {getTypeIcon(favorite.type)}
          <Typography.Text style={{ marginLeft: 8 }}>来源: {favorite.source}</Typography.Text>
          <div style={{ marginLeft: 'auto' }}>
            <Rate disabled defaultValue={favorite.rating} />
          </div>
        </div>
        
        <Card size="small" title="内容预览" style={{ marginBottom: 24 }}>
          <Paragraph>{favorite.content}</Paragraph>
        </Card>
        
        <Button type="primary">
          <Link to="/favorites">返回列表</Link>
        </Button>
      </div>
    );
  }
  
  // 显示收藏列表
  const favorites = dataService.getFavorites();
  
  return (
    <div className="content-section">
      <Title level={2}>个人收藏</Title>
      {favorites.length > 0 ? (
        <List
          itemLayout="vertical"
          size="large"
          dataSource={favorites}
          renderItem={(favorite: Favorite) => (
            <List.Item
              actions={[
                <Rate key="rating" disabled defaultValue={favorite.rating} />,
                <Button type="link" key="detail">
                  <Link to={`/favorites/${favorite.id}`}>查看详情</Link>
                </Button>
              ]}
              extra={
                <div style={{ width: 120, height: 120, backgroundColor: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {getTypeIcon(favorite.type)}
                </div>
              }
            >
              <List.Item.Meta
                avatar={getTypeIcon(favorite.type)}
                title={<Link to={`/favorites/${favorite.id}`}>{favorite.title}</Link>}
                description={`来源: ${favorite.source} | 类型: ${getTypeText(favorite.type)}`}
              />
              <Paragraph ellipsis={{ rows: 2 }}>{favorite.content}</Paragraph>
            </List.Item>
          )}
        />
      ) : (
        <Empty description="暂无个人收藏" />
      )}
    </div>
  );
};

export default FavoritePage;
